<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作DOM元素内容</title>
</head>
<body>
<h3>操作DOM元素内容</h3>
<p>
    DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。 <br>
    就是操作对象使用的点语法
</p>
<p>
    如果想要修改标签元素的里面的内容，则可以使用如下几种方式： <br>
    1. 对象.innerText 属性 <br>
    2. 对象.innerHTML 属性
</p>
<hr>

<h3>1. 元素innerText 属性</h3>
<p>
    将文本内容添加/更新到任意标签位置 <br>
    显示纯文本，不解析标签
</p>

<h3>2. 元素.innerHTML 属性</h3>
<p>
    将文本内容添加/更新到任意标签位置 <br>
    会解析标签，多标签建议使用模板字符
</p>
<hr>

<h2>总结</h2>
<pre style="font-size: 22px;">
    1. 设置/修改DOM元素内容有哪2钟方式？
            元素.innerText 属性
            元素.innerHTML 属性
    2. 三者的区别是什么？
            元素.innerText 属性 只识别文本，不能解析标签
            元素.innerHTML 属性 能识别文本，能够解析标签
            如果还在纠结到底用谁，你可以选择innerHTML
</pre>
<hr>

<!--演示-->
<div class="文字">我是文字的内容</div>
<div class="文字2">测试测试测试测试</div>

<script>
    // 获取 DOM元素
    const 文字信息 = document.querySelector('.文字')
    console.log(文字信息.innerText) // 输出控制台. 获取文字内容,和对象操作是是一样的
    // 修改文字内容  对象.innerText 属性
    文字信息.innerText = '孙新罡,修改文字信息' // 页面文字被修改

    // innerText 缺点,只识别文本，不能解析标签

    // 获取 DOM元素
    const 文字信息2 = document.querySelector('.文字2')
    console.log(文字信息2.innerHTML) // 输出控制台. 看看文字原先的内容
    // 修改文字内容  对象.innerHTML 属性
    文字信息2.innerHTML = '<strong><i>孙新罡,再次修改文字</i></strong>' // 页面文字被修改, 同时还可以添加标签

    // innerHTML , 能识别文本，也能够解析标签

</script>

</body>
</html>